<template>
  <div class="wrapper">
    <div class="filter_box clearfix">
      <ul class="filter_box_ul">
        <li id="000" data-name="不限" :class="{active:region_id === '000'}" @click="filterB('000')">不限</li>
        <li
          v-for="(item, index) in filter"
          :key="index"
          :class="{active:region_id === item.region_id}"
          @click="filterB(item.region_id,item.name)"
        >{{item.name}}</li>
      </ul>
      <ul class="filter_box_ul">
        <li id="000" data-name="不限" @click="filterXiaoB('000')" :class="{active:region_id_xiao === '000'}">不限</li>
        <li v-for="(item, index) in filterXiao"
          :key="index"
          :class="{active:region_id_xiao === item.region_id}"
          @click="filterXiaoB(item.region_id,item.name)"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyIndustry',
  data () {
    return {
      filter: [],
      filterXiao: [],
      region_id: 0,
      region_id_xiao: 0,
      store_category1: this.store_category,
      categoryclass1: this.categoryclass
    }
  },
  props: {
    store_category: String,
    categoryclass: String
  },
  mounted () {
    this.postFilter()
  },
  methods: {
    filterB (id, name) {
      this.region_id = id
      if (id !== '000') {
        this.store_category1 = name
        this.postFilterX()
      } else {
        this.store_category1 = ''
        this.$emit('is_industryB', '不限')
        this.$emit('industryC', '')
      }
    },
    filterXiaoB (id, name) {
      this.region_id_xiao = id
      if (id !== '000') {
        this.categoryclass1 = name
        this.$emit('is_industryB', this.categoryclass1)
        let shu = [this.store_category1, this.categoryclass1]
        this.$emit('industryC', shu)
      } else {
        this.categoryclass1 = ''
        if (this.store_category1 === '') {
          this.$emit('industryC', '')
          this.$emit('is_industryB', '不限')
        } else {
          this.$emit('is_industryB', this.store_category1)
          let shu = [this.store_category1, this.categoryclass1]
          this.$emit('industryC', shu)
        }
      }
    },
    postFilter () {
      this.$axios.post(process.env.API_HOST + '/api/common/one_industry')
        .then(this.postFilterSucc)
        .catch(error => console.log(error))
    },
    postFilterSucc (res) {
      if (res.data.code === 1) {
        this.filter = res.data.data
      }
    },
    postFilterX () {
      this.$axios.post(process.env.API_HOST + '/api/common/second_industry', {
        id: this.region_id
      }).then(this.postFilterXSucc)
        .catch(error => console.log(error))
    },
    postFilterXSucc (res) {
      if (res.data.code === 1) {
        this.filterXiao = res.data.data
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  position absolute
  width 100%
  z-index 999
  top 1.1rem
.filter_box
  width 100%
  height 7.9rem /* 395/50 */
  overflow hidden
  background #fff
  .filter_box_ul
    width 50%
    height 100%
    overflow auto
    float left
    text-align center
    background #F8F8F8
    line-height .88rem /* 44/50 */
    font-size .3rem /* 15/50 */
    .active
      color #F6360A
  .filter_box_ul:nth-child(1)
    background transparent
</style>
